import React, { useEffect, useState } from "react";
//定义props接口
interface BarrageProps {
  text: string;
}
//定义组件
const Barrage: React.FC<BarrageProps> = ({ text }) => {
  //定义状态初始值为100
  const [position, setPosition] = useState(100);
  //定义定时器控制弹幕滚动的速度
  useEffect(() => {
    const interval = setInterval(() => {
      setPosition((prevPosition) => prevPosition - 1); //速度
    }, 70);
    return () => clearInterval(interval);
  }, []);
  return (
    <div
      style={{
        position: "absolute",
        bottom: "20px",
        left: `${position}%`,
        color: "red",
        fontSize: "17px",
        whiteSpace: "nowrap",
      }}
    >
      {text}
    </div>
  );
};
export default Barrage;